<template>
  <div class="cell-list">
    <div class="example-list">

      <view class="example" v-for="(item, index) in detailData" :key="index">
        <view class="wrap">
          <view class="title">{{ item.name }}</view>
          <view class="price" v-html="item.buildingname"></view>
          <view class="bottom">
            <view class="category">{{ item.type }}</view>
            <view class="toggle" @click="viewSame(item)">
              查看同款
            </view>
          </view>
        </view>
        <img :src="'https://fh4.qinyuan.cn' + item.images" class="image">
      </view>

    </div>
  </div>
</template>

<script>
import Search from '../../components/Search/Search.vue'
import requestV1 from "../../common/requestV1";
export default {
  components: {
    Search
  },
  data() {
    return {
      id: '',
      detailData: []
    }
  },
  onLoad(e) {
    this.id = e.id
    this.getDetailData()
  },
  methods: {
    async getDetailData() {
      uni.showLoading()
      const data = await requestV1({
        url: '/casemarks/details',
        method: 'post',
        data: {
          id: this.id
        }
      })
      uni.hideLoading()
      this.detailData = data.data
    },
    viewSame(data) {
      this.goPage(`/pages/goods-detail/goods-detail?id=${data.shop_id}`)
    },
    goPage(url, links) {
      url = links
        ? url + '?url=' + links
        : url

      uni.navigateTo({
        url
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.cell-list {
  padding: 36rpx;
  background-color: rgb(251, 251, 251);
  height: 100vh;
  overflow: auto;
  box-sizing: border-box;
  .city-wrap {
    margin: 24rpx auto 48rpx;
    display: flex;
    align-items: center;
    .fire {
      width: 63rpx;
      height: 63rpx;
    }
    .city-list {
      width: calc(100% - 63rpx - 24rpx);
      margin-left: 24rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .city {
        width: 127.8rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: center;
        background-color: #fff;
        border-radius: 19.8rpx;
        font-size: 31.788rpx;
      }
    }
  }

  .example-list {
    .example {
      position: relative;
      background-color: #fff;
      border-radius: 29rpx;
      padding-top: 54rpx;
      padding-bottom: 36rpx;
      box-sizing: border-box;
      margin-bottom: 36rpx;
      display: flex;
      .wrap {
        width: 432rpx;
        .title {
          padding: 0 36rpx;
          font-size: 36rpx;
          line-height: 58rpx;
          color: rgba(20, 19, 18, 1);
          font-weight: bold;
        }
        .price {
          margin: 12rpx 0 12rpx;
          padding: 0 36rpx;
          font-size: 31rpx;
          line-height: 54rpx;
          color: rgba(20, 19, 18, 0.45);
        }
        .bottom {
          padding-left: 36rpx;
          display: flex;
          margin-top: 36rpx;
          .category {
            text-align: center;
            width: 244rpx;
            height: 54rpx;
            line-height: 54rpx;
            font-size: 20rpx;
            padding: 12rpx, 21rpx, 12rpx, 21rpx;
            color: rgba(20, 19, 18, 1);
            background-color: rgba(245, 245, 245, 1);
            border-radius: 18rpx;
            margin-right: 36rpx;
            box-sizing: border-box;
          }
          .toggle {
            width: 137rpx;
            height: 54rpx;
            line-height: 54rpx;
            font-size: 21rpx;
            background-color: rgba(55, 68, 134, 1);
            border-radius: 13rpx;
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            .toggle-icon {
              width: 20rpx;
              height: 8rpx;
              margin: 0 12rpx 0 24rpx;
            }
          }
        }
      }
      .image {
        position: absolute;
        right: 58rpx;
        top: 50%;
        transform: translateY(-50%);
        width: 176rpx;
        height: 217rpx;
      }
    }
  }
}
</style>
